import React, { useState, useEffect } from 'react'
import { Layout, Menu } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import axios from 'axios'
import { connect } from 'react-redux'
import {
  PieChartOutlined,
  UserOutlined,
  DesktopOutlined,
} from '@ant-design/icons'
import './SideMenui.scss'
const { Sider } = Layout

const items = [
  {
    label: '栏目1',
    key: '/page1',
    icon: <PieChartOutlined />,
  },
  {
    label: '栏目2',
    key: '/page2',
    icon: <DesktopOutlined />,
  },
  {
    label: '栏目3',
    key: '/page3',
    icon: <UserOutlined />,
    children: [
      {
        label: '栏目301',
        key: '/page3/page301',
      },
      {
        label: '栏目302',
        key: '/page3/page302',
      },
    ],
  },
  {
    label: '栏目4',
    key: '/page4',
    icon: <UserOutlined />,
    children: [
      {
        label: '栏目401',
        key: '/page4/page401',
      },
      {
        label: '栏目402',
        key: '/page4/page402',
      },
    ],
  },
]

const iconList = {
  '/home': <UserOutlined />,
  '/user-manage': <UserOutlined />,
  '/user-manage/list': <UserOutlined />,
  '/right-manage': <UserOutlined />,
  '/right-manage/role/list': <UserOutlined />,
  '/right-manage/right/list': <UserOutlined />,
  //.......
}

function SideMenu(props) {
  // const [collapsed, setCollapsed] = useState(false)
  const [menu, setmenu] = useState([])
  const currentRoute = useLocation()

  useEffect(() => {

    let {role:{rights}}=JSON.parse(localStorage.getItem('xinwen-token'))
    axios.get('/rights?_embed=children').then((ress) => {
      let res = ress.data
      let newarr = []

      for (let i = 0; i < res.length; i++) {
        if (res[i].pagepermisson && rights.includes(res[i].key)) {
          newarr.push({ ...res[i], label: res[i].title, children: [],icon:iconList[res[i].key] })
        }
        let chillength = res[i].children.length
        for (let j = 0; j < chillength; j++) {
          if (res[i].children[j].pagepermisson && rights.includes(res[i].children[j].key)) {
            newarr[newarr.length - 1].children.push({
              ...res[i].children[j],
              label: res[i].children[j].title,
              icon:iconList[res[i].children[j].key]
            })
          }
        }
      }
      newarr.forEach(i=>{
        if(i.children && i.children.length===0){
          delete i.children
        }
      })
      setmenu(newarr)
    })
  }, [])

  const navgateTo = useNavigate()
  const menuClick = (e) => {
    navgateTo(e.key)
  }
  let openKeys = ['/' + currentRoute.pathname.split('/')[1]]
console.log(currentRoute,'currentRoutecurrentRoute');
  return (
    <Sider trigger={null} collapsible collapsed={props.collapsed}>
      <div
        style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}
      >
        <div className="logo">管理后台</div>
        <div style={{ flex: 1, overflow: 'auto' }}>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={[currentRoute.pathname]}
            defaultOpenKeys={openKeys}
            items={menu}
            onClick={menuClick}
          />
        </div>
      </div>
    </Sider>
  )
}


export default  connect((state)=>({collapsed: state.CollapsedReducer.isCollapsed}))(SideMenu)